<script setup lang="ts">

import ThreeDiv from "@/Components/ThreeDiv.vue";
import ChildBoth from "@/Components/ChildBoth.vue";
import LeftList from "@/Components/LeftList.vue";
import RightUserPhoto from "@/Components/RightUserPhoto.vue";
import UndoRedoSearch from "@/Components/UndoRedoSearch.vue";
import SongBottom from "@/Components/SongBottom.vue";
import MusicRoomTitleSvg from "@/svg/MusicRoomTitleSvg.vue";
import router from "@/Router";
import {songStyles} from "@/store/dataType";

//
// const songList = ref([])
// const userId = localStorage.getItem("userId")??''
// console.log('userId in LoveSongList is' + userId)
//
// getLoveSongList()
//
// async function getLoveSongList(){
//   const response = await axios.post("http://localhost:8080/SongController/findAllSongByStyle", null, {
//     params: {
//       style: 2
//     }
//   })
//
//   songList.value = response.data
//   console.log(songList.value)
//   console.log(localStorage.getItem("userId"))
//   /*console.log("response data is "+response.data)
//   console.log("songList.value is "+JSON.stringify(songList.value))*/
// }
//
// const emit = defineEmits(['page-to-send', 'display-song', 'display-song-list'])
// const sendPlayListTab = (index:number) => {
//   storeIndex.value=index
//   localStorage.setItem("songType",index.toString())
//   console.log("localStorage.setItem后,type在音乐馆的值为"+index.toString())
//   console.log("歌单索引已经在MusicRoom页 被修改为：",storeIndex.value)
//   emit('page-to-send','PlayListPage')
// }
//
// function playSongFunction(song:any, songList:any, index:Number){
//   /*  console.log("playSongFunction 执行了")*/
//   emit("display-song", song)
//   emit("display-song-list", songList)
//   store.current=index
// }

const sendStyleSongsTab = (style:String) => {
  let styleObject={
    style:style
  }
  router.push({
    path:"/style_songs",
    query:styleObject
  })
}

//定义动态样式，注意这里的样式类型数量需要和songStyles类型数量一致
let cssClassList = [
    "c1","c2","c3","c4","c5"
]
</script>

<template>
  <div class="fixed   w-200 h-45  pic z--1 top-20 left-160 opacity-23"></div>

  <child-both></child-both>
  <song-bottom class="pl-30 pr-35" ></song-bottom>
  <div class="body flex">
    <left-list></left-list>
    <div class="main grow h-200 flex flex-col overflow-auto pb-15 mx-3 ">
      <undo-redo-search></undo-redo-search>
      <div class="mt-17 h-auto flex-col overflow-y-scroll mb-25 ">
        <MusicRoomTitleSvg class="w-47 h-auto ml-5"></MusicRoomTitleSvg>
        <three-div class="mt-3 ml-5"></three-div>
        <div class="w-275 flex-col h-auto gap-y-4 ml-8">
            <div class="grid grid-cols-4 gap-5  ">
              <div v-for="(ele,index) in songStyles"
                   @click="sendStyleSongsTab(ele)"
                   class="flex h-50 p-4 rounded-2xl"
                   :class="cssClassList[index]"
              >
                <div class="text-gray-5 px-2 bg-white rounded-xl h-10 text-6 font-bold">{{ ele }}</div>
              </div>
              <div v-for="(ele,index) in songStyles"
                   @click="sendStyleSongsTab(ele)"
                   class="flex h-50 p-4 rounded-2xl"
                   :class="cssClassList[index]"
              >
                <div class="text-gray-5 px-2 bg-white rounded-xl h-10 text-6 font-bold">{{ ele }}</div>
              </div>
            </div>
        </div>

      </div>

    </div>
    <right-user-photo></right-user-photo>
  </div>
</template>

<!--<style scoped>-->
<!--</style>-->

<!--<style scoped>-->

<!--</style>-->
<style scoped>
div::-webkit-scrollbar {
  display: none;
}

div {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.c1{
  --at-apply: "bg-cyan-2 opacity-60 hover:bg-cyan-3";
}
.c2{
  --at-apply:" bg-blue-2 opacity-60 hover:bg-blue-3";
}
.c3{
  --at-apply:" bg-purple-2 opacity-60 hover:bg-purple-3";
}
.c4{
  --at-apply:" bg-pink-2 opacity-60 hover:bg-pink-3";
}
.c5{
  --at-apply:" bg-red-2 opacity-60 hover:bg-red-3";
}
.pic {
  /*此三个样式组合，可以保证背景图片充满整个容器. 貌似单独写在组件的style里面不生效。*/
  background-image: url(../img/child-six.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>